<template>
  <view class="page" v-if="dataInfo.id">
    <view class="page-head">
      <view class="title">
        {{ dataInfo.service_type || "暂无" }}
      </view>
      <view class="desc"> 订单编号：{{ dataInfo.service_no || "暂无" }} </view>
    </view>
    <view class="group">
      <view class="info-group">
        <view class="title-view">
          <text class="title">订单信息</text>
        </view>
        <view class="info-line">
          <text class="label">服务地址</text>
          <text class="value">{{ dataInfo.servicer_address || "暂无" }}</text>
        </view>
        <view class="info-line">
          <text class="label">联系人</text>
          <text class="value">{{ dataInfo.contact_name || "暂无" }}</text>
        </view>
        <view class="info-line">
          <text class="label">联系电话</text>
          <text class="value">{{ dataInfo.contact_mobile || "暂无" }}</text>
        </view>

        <view class="info-line">
          <text class="label">描述</text>
          <text class="value">{{ dataInfo.description || "暂无" }}</text>
        </view>
        <view class="info-line">
          <text class="label">故障图片</text>
          <text class="value">
            <Upload
              :imgList="dataInfo.img"
              v-if="dataInfo.img"
              :uploadWidth="120"
              :uploadHeight="120"
              :showDelete="false"
            ></Upload>

            <view v-else>无</view>
          </text>
        </view>
        <!-- <view class="circle"></view> -->
        <view class="line"></view>
      </view>
    </view>
    <view class="group">
      <view class="info-group">
        <view class="title-view">
          <text class="title">服务商信息</text>
        </view>
        <view class="info-line">
          <text class="label">服务商</text>
          <text class="value">{{ dataInfo.servicer_name || "暂无" }}</text>
        </view>
        <view class="info-line">
          <text class="label">地址</text>
          <text class="value">{{ dataInfo.servicer_address || "暂无" }}</text>
        </view>
        <view class="info-line">
          <text class="label">服务项目</text>
          <text class="value">{{ dataInfo.service_type || "暂无" }}</text>
        </view>

        <view class="info-line">
          <text class="label">服务类型</text>
          <text class="value">{{ dataInfo.service_type || "暂无" }}</text>
        </view>

        <!-- <view class="circle"></view> -->
        <view class="line"></view>
      </view>
      <view class="info-group" v-if="false">
        <view class="title-view">
          <text class="title">服务项目</text>
        </view>
        <view class="info-line">
          <text class="label">项目名称</text>
          <text class="value">{{ dataInfo.service_type || "暂无" }}</text>
        </view>
        <view class="info-line">
          <text class="label">服务单号</text>
          <text class="value">{{ dataInfo.service_no || "暂无" }}</text>
        </view>
        <view class="info-line">
          <text class="label">订单状态:</text>
          <text class="value">{{ dataInfo.orderStatus || "暂无" }}</text>
        </view>
        <view class="info-line">
          <text class="label">创建时间:</text>
          <text class="value">{{ dataInfo.create_time || "暂无" }}</text>
        </view>
        <view class="info-line">
          <text class="label">最后更新时间:</text>
          <text class="value">{{ dataInfo.update_time || "暂无" }}</text>
        </view>
      </view>
    </view>
    <view class="group">
      <view class="info-group">
        <view class="title-view">
          <text class="title">设备信息</text>
          <view class="ft color-active" @click="onToDevice"> 设备详情 </view>
        </view>
        <view class="info-line">
          <text class="label">设备编号</text>
          <text class="value">{{ dataInfo.no || "暂无" }}</text>
        </view>
        <view class="info-line">
          <text class="label">设备名称</text>
          <text class="value">
            {{ dataInfo.alias_name || dataInfo.device_name }}</text
          >
        </view>
        <view class="info-line">
          <text class="label">设备类型</text>
          <text class="value">{{ dataInfo.device_type || "-" }}</text>
        </view>
        <view class="info-line">
          <text class="label">设备型号</text>
          <text class="value">{{ dataInfo.model_no || "" }}</text>
        </view>
      </view>
    </view>

    <template v-if="workList.length">
      <view class="group" v-for="(log, logIndex) in workList" :key="logIndex">
        <view class="info-group">
          <view class="title-view">
            <view class="title">
              <label class="text"> 工单_{{ log.order_id }} </label>
              <label class="status" :class="[log.status]">{{
                log.statusText
              }}</label>
            </view>
          </view>
          <view class="process" v-if="log.work_flow_info">
            <view
              class="process-item"
              v-for="(work, workIndex) in log.work_flow_info"
              :key="workIndex"
            >
              <view class="time-view">
                <text class="date">{{ work.date || "" }}</text>
                <text class="time">{{ work.time || "" }}</text>
              </view>
              <view class="message">
                <!-- <view class="title">
                  {{ work.title }}
                </view> -->
                <view class="text">
                  {{ work.work_log }}
                </view>
                <Upload
                  :imgList="work.img_url"
                  v-if="work.img_url"
                  :uploadWidth="120"
                  :uploadHeight="120"
                  :showDelete="false"
                ></Upload>
              </view>
            </view>
          </view>

          <no-data
            v-else
            status="no_shujv"
            boxStyle="margin-bottom:0"
          ></no-data>
        </view>
      </view>
    </template>

    <view class="group" v-if="false">
      <view class="info-group" v-if="serviceOrderLogs.length">
        <view class="process">
          <view
            class="process-item"
            v-for="(work, workIndex) in serviceOrderLogs"
            :key="workIndex"
          >
            <view class="time-view">
              <text class="date">{{ work.date || "" }}</text>
              <text class="time">{{ work.time || "" }}</text>
            </view>
            <view class="message">
              <view class="title">
                {{ work.title }}
              </view>
              <view class="text">
                {{ work.content }}
              </view>
              <Upload
                :imgList="work.img"
                v-if="work.img"
                :uploadWidth="120"
                :uploadHeight="120"
                :showDelete="false"
              ></Upload>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp();
import { getEquipmentTypeOptions } from "@/common/api/equipment-type.js";
import {
  getServiceOrderRecord,
  getServiceOrderInfo,
} from "@/common/api/service-order-record.js";
import detailModule from "@/common/mixins/detail-module";
import Upload from "@/components/public/upload/index";
import { imgBaseUrl, imgBaseUrlV0 } from "@/common/config/index";
import { getWorkList } from "@/common/api/equipment";
import noData from "@/components/public/noData/noData";
import { stringToJSON } from "@/utils";
export default {
  mixins: [detailModule],
  components: {
    Upload,
    noData,
  },
  data() {
    return {
      imgBaseUrlV0,
      dataInfo: {},
      serviceOrderLogs: [],
      equipmentTypeOptions: [],
      workList: [],
      mixinViewOptions: {
        getURL: "/serviceList/serviceListDetail",
        isPage: false,
        isShowLoading: false,
        reachBottom: false,
        createdIsNeed: false,
        pullDown: false,
      },
    };
  },
  async onLoad(e) {
    let id = (this.dataForm.id = e.id);
    if (!id) {
      return;
    }
    if (e.name) {
      uni.setNavigationBarTitle({
        title: "订单详情 - " + decodeURIComponent(decodeURIComponent(e.name)),
      });
    }
    this.initData();
  },
  methods: {
    fetchComplete(err, data, res = {}) {
      if (err) return this.message.error(res.message || "获取订单详情失败");
      data.orderStatus = this.$getDictLabel("serviceOrderStatus", data.status);
      getWorkList({
        order_id: data.service_no,
      }).then((res) => {
        console.log(res, "??res");
        if (res.code !== this.$ERR_OK) {
          return this.message.error(res.message || "获取工单列表失败");
        }

        let data = res.data || [];
        let obj = {
          1: "color-warning",
          2: "color-success",
          3: "color-primary",
          4: "color-default",
        };

        data.forEach((i) => {
          i.statusText = this.$getDictLabel(
            "serviceOrderStatus",
            i.service_list_status
          );
          console.log(i.statusText, "?   i.statusText");

          let status = i.service_list_status;
		  console.log(status,'status??')
          i.status = obj[status] || "";
          if (Array.isArray(i.work_flow_info) && i.work_flow_info) {
            i.work_flow_info.forEach((log) => {
              if (log.create_time) {
                log.date = this.$moment(log.create_time).format("MM-DD");
                log.time = this.$moment(log.create_time).format("HH:mm");
              } else {
                log.date = log.time = "";
              }
              log.img_url = stringToJSON(log.img_url, []);
            });
          }
        });
        this.workList = data;
      });
    },
    // 查看图片
    previewImage(src) {
      let urls = this.dataInfo.img;
      uni.previewImage({
        current: src,
        urls,
      });
    },
    async initData() {
      uni.showLoading({
        title: "加载中",
      });
      await Promise.all([
        this.getDataInfo(),
        this.getEquipmentTypeOptions(),
        this.getServiceOrderInfo(),
      ]);
      uni.hideLoading();
    },
    getEquipmentTypeOptions() {
      return getEquipmentTypeOptions().then((response) => {
        this.equipmentTypeOptions = response;
      });
    },
    getServiceOrderInfo() {
      return getServiceOrderInfo(this.dataForm).then((res) => {
        let data = res.data || [];
        data.forEach((i) => {
          let m = this.$moment(i.create_time);
          i.date = m.format("MM-DD");
          i.time = m.format("HH:mm");
        });
        data = data.reverse();
        this.serviceOrderLogs = data;
      });
    },
    onToDevice() {
      this.$Router.push({
        path: "/pageA/equipment-detail/index",
        query: {
          id: this.dataInfo.device_id,
        },
      });
    },
  },
  async onPullDownRefresh() {
    await this.initData();
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/variable';

.page {
  position: relative;
  padding: 0 0 1rpx;
  background: linear-gradient(180deg, #0D1523 0%, #102945 100%);
  min-height: calc(100vh - var(--window-top));
}

.page-head {
  position: relative;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 280rpx;
  background-color: #252D42;
  color: #fff;
  padding-top: 60rpx;

  > .title {
    font-size: 36rpx;
    text-align: center;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: bold;
    margin-bottom: 24rpx;
  }

  > .desc {
    font-size: 24rpx;
    text-align: center;
  }
}

.group {
  position: relative;
  z-index: 5;
  padding: 1rpx 0;
  transform: translate3d(0, -60rpx, 0);
  margin-bottom: 20rpx;
}

.info-group {
  position: relative;
  z-index: 2;
  background-color: #1A3156;
  margin: 0 30rpx;
  border-radius: 10rpx;
  padding: 30rpx 0 20rpx;
  overflow: hidden;
  color:color-white;
  &:after, &:before {
    position: absolute;
    display: block;
    z-index: 2;
    content: '';
    bottom: 0;
    width: 60rpx;
    height: 60rpx;
    background: #F5F5F5;
    border-radius: 60rpx;
  }

  &:last-child {
    &:after, &:before {
      display: none;
    }
  }

  >.line {
    position: absolute;
    display: none;
    height: 2rpx;
    width: 100%;
    background-image: linear-gradient(90deg, #eee 0%, #eee 50%, transparent 50%);
    background-size: 16rpx 2rpx;
    bottom: 0rpx;
    left: 0;
  }

  &:after, &:before, >.circle:after, >.circle:before {
    position: absolute;
    z-index: 3;
    content: '';
    width: 40rpx;
    height: 40rpx;
    background: #F5F5F5;
    border-radius: 40rpx;
  }

  &:after {
    right: -20rpx;
    bottom: -20rpx;
  }

  &:before {
    left: -20rpx;
    bottom: -20rpx;
  }

  >.circle:after {
    right: -20rpx;
    top: -20rpx;
  }

  >.circle:before {
    left: -20rpx;
    top: -20rpx;
  }

  &:first-child {
    margin-top: 0;
  }

  &:last-child {
    border-bottom: none;

    &:after, &:before {
      content: none;
    }
  }

  .title-view {
    display: flex;
    // display: none;
    flex-direction: row;
    padding: 0 20rpx 0 40rpx;
    padding-bottom: 10rpx;
    position: relative;

    .title {
      flex: 1;
      font-size: 30rpx;
      font-weight: 700;
      width: 0;

      .text {
        margin-right: 10rpx;
      }

      .status {
        display: inline-block;
        padding: 0 16rpx;
        line-height: 40rpx;
        border-radius: 4rpx;
        color: #fff;
        font-size: 24rpx;
        font-weight: 500;
        background: #F2F3F7;
        margin-left: 10rpx;

        &.color-warning {
          color: color-warning;
          background: #FEF2ED;
        }

        &.color-success {
          background: #EFFFEF;
          color: color-success;
        }

        &.color-primary {
          color: color-primary;
          border: 1rpx solid color-primary;
        }
      }
    }

    .ft {
      flex: 0 0 auto;
      font-size: 30rpx;
      text-decoration: underline;
    }
  }

  .info-line {
    display: flex;
    font-size: 26rpx;
    padding: 0 40rpx;
    line-height: 34rpx;
	color:color-white;
    > .label {
      flex: 0 0 4em;
    }

    > .value {
      flex: 1;
      line-height: 40rpx;
      padding: 10rpx 0;
    }

    &:last-child {
      padding-bottom: 0;
    }

    .label {
      font-size: 26rpx;
      color: color-white;
      border: none;
      padding: 0;
    }

    .value {
      color: color-white;
      padding-left: 24rpx;
    }
  }

  .image-view {
    padding: 3%;
    text-align: center;

    .image {
      width: 30%;
      margin-right: 1%;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .process {
    padding: 30rpx;
    padding-top: 10rpx;

    .process-item {
      display: flex;
      flex-direction: row;

      .time-view {
        padding-bottom: 30rpx;
        padding-right: 30rpx;
        padding-top: 10rpx;
        width: 140rpx;
        flex: 0 0 140rpx;

        .date {
          display: block;
          white-space: nowrap;
          font-size: 30rpx;
          /* font-weight: 700; */
          text-align: center;
          color: #fff;
        }

        .time {
          display: block;
          white-space: nowrap;
          text-align: center;
          font-size: 26rpx;
          /* font-weight: 700; */
          color: #fff;
        }
      }

      &:first-child {
        .message {
          &:before {
            background-image: url('https://rhws.oss-cn-chengdu.aliyuncs.com/icon_v2/order_gou2x.png'); // rhws.oss-cn-chengdu.aliyuncs.com/icon_v2/fuwushang_yuan_h.png);
          }
        }
      }

      .message {
        position: relative;
        padding-left: 54rpx;
        padding-top: 22rpx;
        font-size: 26rpx;
        color: #434343;
        padding-bottom: 60rpx;

        > .title {
          font-size: 28rpx;
          color: #333;
        }

        > .text {
          margin-bottom: 12rpx;
          color: #fff;
        }

        &::before {
          content: '';
          position: absolute;
          z-index: 2;
          top: 30rpx;
          left: 0;
          width: 40rpx;
          height: 40rpx;
          // border: 4rpx solid color-active;
          border-radius: 50%;
          background-color: #fff;
          background-size: cover;
          background-image: url('https://rhws.oss-cn-chengdu.aliyuncs.com/icon_v2/fuwushang_yuan_h_2.png'); // rhws.oss-cn-chengdu.aliyuncs.com/icon_v2/fuwushang_yuan_h.png);
        }

        &::after {
          content: '';
          position: absolute;
          z-index: 1;
          height: 100%;
          width: 0;
          top: 34rpx;
          left: 19rpx;
          border-left: 2rpx dashed #eee;
        }
      }

      &:last-child {
        .message::after {
          width: 0;
          height: 0;
        }
      }
    }
  }
}
</style>